<section id="lists">
  <h2>Lists</h2>
  <ul>
    <li>Unordered list item 1</li>
    <li>
      Unordered list item 2
      <ul>
        <li>Unordered list sub-item 1</li>
        <li>Unordered list sub-item 2</li>
      </ul>
    </li>
    <li>Unordered list item 3</li>
    <li>Unordered list item 4</li>
  </ul>
  <ol>
    <li>Ordered list item 1</li>
    <li>
      Ordered list item 2
      <ol>
        <li>Ordered list sub-item 1</li>
        <li>Ordered list sub-item 2</li>
      </ol>
    </li>
    <li>Ordered list item 3</li>
    <li>Ordered list item 4</li>
  </ol>

  <details class="demo">
    <summary>View code</summary>
    <pre><code>&lt;ul&gt;
  &lt;li&gt;Unordered list item 1&lt;/li&gt;
  &lt;li&gt;
    Unordered list item 2
    &lt;ul&gt;
      &lt;li&gt;Unordered list sub-item 1&lt;/li&gt;
      &lt;li&gt;Unordered list sub-item 2&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;Unordered list item 3&lt;/li&gt;
  &lt;li&gt;Unordered list item 4&lt;/li&gt;
&lt;/ul&gt;
&lt;ol&gt;
  &lt;li&gt;Ordered list item 1&lt;/li&gt;
  &lt;li&gt;
    Ordered list item 2
    &lt;ol&gt;
      &lt;li&gt;Ordered list sub-item 1&lt;/li&gt;
      &lt;li&gt;Ordered list sub-item 2&lt;/li&gt;
    &lt;/ol&gt;
  &lt;/li&gt;
  &lt;li&gt;Ordered list item 3&lt;/li&gt;
  &lt;li&gt;Ordered list item 4&lt;/li&gt;
&lt;/ol&gt;</code></pre>
  </details>
</section>

<h2>Definition Lists</h2>
<dl>
  <dt>Term 1</dt>
  <dd>Definition for term 1.</dd>

  <dt>Term 2</dt>
  <dd>Definition for term 2.</dd>

  <dt>Term 3</dt>
  <dd>Definition for term 3.</dd>
</dl>

<details class="demo">
  <summary>View code</summary>
  <pre><code>&lt;dl&gt;
  &lt;dt&gt;Term 1&lt;/dt&gt;
  &lt;dd&gt;Definition for term 1.&lt;/dd&gt;

  &lt;dt&gt;Term 2&lt;/dt&gt;
  &lt;dd&gt;Definition for term 2.&lt;/dd&gt;

  &lt;dt&gt;Term 3&lt;/dt&gt;
  &lt;dd&gt;Definition for term 3.&lt;/dd&gt;
&lt;/dl&gt;</code></pre>
</details>